<template>
    <div class="chat-container">
        <!-- <header class="chat-header">
        <button class="header-btn"><Menu class="icon" /></button>
        <h1>Kimi <ChevronDown class="icon" /></h1>
        <button class="header-btn"><VolumeX class="icon" /></button>
        <button class="header-btn"><RefreshCw class="icon" /></button>
      </header> -->
        <div class="message-list">
            <message-item v-for="message in messages" :key="message.id" :is-user="message.isUser"
                :content="message.content" :avatar="message.avatar"></message-item>
        </div>

        <!-- <div class="quick-actions">
        <button @click="handleCommand('photo')">
          <Camera class="icon" />
          拍照解题
        </button>
        <button @click="handleCommand('call')">
          <Phone class="icon" />
          打电话
        </button>
        <button @click="handleCommand('create')">
          <Image class="icon" />
          图片创作
        </button>
        <button @click="handleCommand('translate')">
          <Languages class="icon" />
          翻译
        </button>
      </div> -->

        <div class="input-bar">
            <Mic class="icon mic-icon" />
            <input v-model="newMessage" placeholder="有问题尽管问我..." @keyup.enter="sendMessage" />
            <Plus class="icon" />
            <Camera class="icon" />
        </div>
    </div>
</template>

<script setup>
import { ref, defineProps } from 'vue';
import MessageItem from './MessageItem.vue';
import { Menu, ChevronDown, VolumeX, RefreshCw, Camera, Phone, Image, Languages, Mic, Plus } from 'lucide-vue-next';

let content = defineProps({
    content: {
        type: String,
        default: ''
    }
});

const messages = ref([
    { id: 1, isUser: false, content: '你好！有什么可以帮你的吗？', avatar: 'kimi-avatar' },
    { id: 2, isUser: true, content: '你好', avatar: 'user-avatar' },
    { id: 3, isUser: false, content: '你好！有什么可以帮你的吗？', avatar: 'kimi-avatar' },
    { id: 4, isUser: true, content: '你是谁', avatar: 'user-avatar' },
    { id: 5, isUser: false, content: '我是Kimi，一个由Moonshot AI开发的人工智能助手。我擅长中英文对话，可以帮助你解答问题、处理文本信息，还能协助你完成各种任务。如果你有任何疑问或需要帮助，随时告诉我哦！', avatar: 'kimi-avatar' },
    { id: 6, isUser: false, content: '我是Kimi，一个由Moonshot AI开发的人工智能助手。我擅长中英文对话，可以帮助你解答问题、处理文本信息，还能协助你完成各种任务。如果你有任何疑问或需要帮助，随时告诉我哦！', avatar: 'kimi-avatar' },
    { id: 1, isUser: false, content: '你好！有什么可以帮你的吗？', avatar: 'kimi-avatar' },
    { id: 2, isUser: true, content: '你好', avatar: 'user-avatar' },
    { id: 1, isUser: false, content: '你好！有什么可以帮你的吗？', avatar: 'kimi-avatar' },
    { id: 2, isUser: true, content: '你好', avatar: 'user-avatar' },
]);

const newMessage = ref('');

function sendMessage() {
    if (newMessage.value.trim()) {
        messages.value.push({
            id: messages.value.length + 1,
            isUser: true,
            content: newMessage.value,
            avatar: 'user-avatar'
        });
        newMessage.value = '';
    }
}

function handleCommand(command) {
    console.log(`Command: ${command}`);
    // 这里可以添加对应功能的逻辑
}
</script>

<style lang="scss">
.chat-container {
    display: flex;
    flex-direction: column;
    // border-radius: 10%;
    height: 80vh;
    background-color: #f5f5f5;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.chat-header {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;

    h1 {
        flex: 1;
        margin: 0;
        font-size: 18px;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .header-btn {
        background: none;
        border: none;
        padding: 8px;
        cursor: pointer;
        color: #666;

        &:hover {
            color: #4185F4;
        }
    }

    .icon {
        width: 20px;
        height: 20px;
    }
}

.message-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.quick-actions {
    display: flex;
    justify-content: space-around;
    padding: 12px;
    background-color: #fff;
    border-top: 1px solid #e0e0e0;

    button {
        display: flex;
        flex-direction: column;
        align-items: center;
        background: none;
        border: none;
        color: #666;
        font-size: 12px;
        cursor: pointer;

        .icon {
            width: 24px;
            height: 24px;
            margin-bottom: 4px;
        }

        &:hover {
            color: #4185F4;
        }
    }
}

.input-bar {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background-color: #fff;
    border-top: 1px solid #e0e0e0;

    input {
        flex: 1;
        border: none;
        padding: 8px 12px;
        font-size: 14px;
        background-color: #f5f5f5;
        border-radius: 20px;
        margin: 0 8px;

        &:focus {
            outline: none;
            box-shadow: 0 0 0 2px rgba(65, 133, 244, 0.2);
        }
    }

    .icon {
        width: 20px;
        height: 20px;
        color: #666;
        cursor: pointer;

        &:hover {
            color: #4185F4;
        }
    }

    .mic-icon {
        margin-right: 8px;
    }
}
</style>